<template>
    <div class="sys-roleusers">
        <div class="header">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">

                <el-form-item prop="searchKey">
                    <el-input v-model="dataForm.searchKey" placeholder="角色名称" clearable/>
                </el-form-item>
                <el-button type="primary" @click="getDataList">搜索</el-button>
            </el-form>
            <component-table :data="tableData">
                <template v-slot:index="{scope}" width="50">
                    <span>{{(dataForm.pageNum - 1) * dataForm.pageSize + (scope.$index + 1)}}</span>
                </template>
                <template v-slot:button="{scope}">
                    <el-button v-has="'sys-user-update'" type="primary" size="mini"
                               @click="addOrUpdateHandle(scope.row)">关联用户
                    </el-button>

                    <component-popover v-has="'sys-user-delete'" :params="scope.row.id" @ok="deleteHandle"
                                       :text="'清空'" :content="111"/>
                </template>
            </component-table>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()"/>
        </div>

    </div>
</template>

<style lang="css" scoped>
    .header {
        position: relative;
    }
</style>

<script>
    import {list, del} from '@/api/sys/roleusers'
    import AddOrUpdate from './add-or-update'

    export default {
        components: {
            AddOrUpdate
        },
        data() {
            return {
                visible: false,
                addOrUpdateVisible: false,
                dataForm: {
                    //当前页
                    pageNum: 1,
                    //每页显示条数
                    pageSize: 10,
                    searchKey: '',
                    ordList: []
                },

                dataList: [],
                ordMap: {},
                tableData: {
                    loading: false,
                    border: true,
                    // 请求回来的数据
                    tableData: [],
                    // 列
                    tableLabel: [],
                    // 操作
                    tableOption: {label: '操作', width: 210, slot: true},
                    // 分页
                    page: {
                        align: 'right',
                        total: 1,
                        size: 10,
                        layout: 'total, sizes, prev, pager, next, jumper',
                        currentPage: 1,
                        currentChange: (currentPage) => {
                            this.$nextTick(() => {
                                this.dataForm.pageNum = currentPage;
                                this.getDataList();
                            })
                        },
                        sizeChange: (val) => { // 不需要可去掉
                            this.dataForm.pageSize = val;
                            this.getDataList();
                        }
                    },
                    // 排序
                    sortChange: (obj, b) => {
                        this.ordMap[obj.prop] = obj.order;
                        let ordList = [];
                        for (let key in this.ordMap) {
                            ordList.push({
                                prop: key,
                                order: this.ordMap[key]
                            })
                        }
                        this.dataForm.ordList = ordList;
                        this.searchClick()
                    },
                    // 表格实现多选时的 change 事件
                    selectionChange: (params) => {
                        this.ids = [];
                        params.map(item => this.ids.push(item.id));
                    }
                }
            };
        },
        created() {
            this.labelInit();
            this.getDataList();
        },
        methods: {

            // 列初始化
            labelInit() {
                this.tableData.tableLabel = [
                    {title: '序号', slot: 'index', fixed: 'left', width: 60, align: 'center'},
                    {title: '角色名称', prop: 'name', width: 450, sort: "custom"},
                    {title: '用户名称', prop: 'realNames', showOverflowTooltip: true, sort: "custom"}
                ];
            },
            // 获取数据列表
            getDataList() {
                this.tableData.loading = true;
                this.request(list, this.dataForm, this, data => {
                    this.tableData.tableData = data.records;
                    this.tableData.page.total = data.total;
                    this.tableData.page.currentPage = data.current;
                    this.tableData.loading = false;
                })
            },
            searchClick() {
                this.dataForm.pageNum = 1;
                this.getDataList();
            },
            addOrUpdateHandle(row) {
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(row.id, row.ids, row.realNames);
                })
            },
            delListHandle() {
                if (this.ids.length === 0) return this.error('请先选择');
                this.alert('确定要清空吗？', () => this.deleteHandle());
            },
            deleteHandle(id) {
                let ids = id ? [id] : this.ids;
                this.request(del, ids, this, data => {
                    (this.tableData.tableData.length === 1 && this.dataForm.pageNum > 1) && (--this.dataForm.pageNum);
                    this.getDataList();
                    this.delVisible = false;
                });
            }
        }
    }
</script>